<template>
  <uv-popup ref="popup" mode="center" :close-on-click-overlay="false" closeable close-icon-color="#fff" width="90vw"
    bg-color="rgba(41,43,43,0.9)" round="20" :overlay-style="{ backdropFilter: `blur(10rpx)` }">
    <view class="overflow-hidden w-90vw">
      <view class="mt-30 items-center">
        <text class="mt-16 mb-30 text-32 fw-700">请输入安全密码</text>
        <uv-code-input @input="inputValue" @finish="finish" :value="props.modelValue" space="20" fontSize="36" size="80"
          color="#fff" borderColor="#fff" focus dot />
      </view>
      <view @click="uniNavigator({ url: `/pages/client/auth/setPayPassword` })" hover-class="op-60"
        class="mt-20 mb-30 p-20 flex-self-center ml-12 color-stress">
        忘记安全密码？
      </view>
    </view>
  </uv-popup>
</template>

<script lang="ts" setup>
import { uniNavigator } from "@/common/libs/utils";
import { ref } from "vue";

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
});
const emit = defineEmits(["finish", "update:modelValue"]);

const popup = ref({} as AnyObject);

const change = (e: boolean) => {
  popup.value[e ? "open" : "close"]();
};

const inputValue = (e: AnyObject) => {
  emit("update:modelValue", e);
}

const finish = (data: AnyObject) => {
  emit("finish", data);
}

defineExpose({ change });

</script>

<style lang="scss" scoped>
// scss
::v-deep .uv-code-input__item {
  border-radius: 12rpx;

  &__dot {
    background-color: #fff;
  }
}
</style>